<template>
	<view class="wrap">
		<view class="goodsWrap">
			<view class="goodsItem" v-for="item in buyList" :key="item.goods_id">
				<view class="pic">
					<image :src="item.goods_pic[0].pics_url" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="goodsName">{{item.goods_name}}</view>
					<view class="goodsNum">数量:X{{item.goods_num}}</view>
					<view class="goodsPrice">￥：<text>{{item.goods_price}}</text></view>
				</view>
			</view>
		</view>
		<view class="bottomControl">
			<view class="total">总价：<text>{{total}}</text></view>
			<view class="buyBtn" @click="quickBuy">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total:0,
				buyList:[],
				orderList:[]
			}
		},
		onShow() {
			if(uni.getStorageSync("buyList")){
				this.buyList = uni.getStorageSync("buyList")
			}
			this.buyList.forEach(v=>{
				this.total += v.goods_num * v.goods_price
			})
			if(uni.getStorageSync("orderList")){
				this.orderList = uni.getStorageSync("orderList")
			}
		},
		methods: {
			quickBuy(){
				let orderNo = new Date()
				orderNo = orderNo.getTime()
				let orderTime = new Date()
				orderTime = orderTime.toLocaleDateString()
				let loginInfo = uni.getStorageSync("loginInfo")
				let obj = {"orderNo":orderNo,"loginInfo":loginInfo,"orderTime":orderTime,"orderInfo":this.buyList,"total":this.total}
				this.orderList.push(obj)
				uni.setStorageSync("orderList",this.orderList)
				uni.showLoading({
					title:"支付中...",
					mask:true
					
				})
				setTimeout(()=>{
					uni.navigateTo({
						url:"../orderComplete/orderComplete"
					}),
					uni.hideLoading({})
				},3000)
				
			}
		}
	}
</script>

<style lang="less">
	.wrap{
		.goodsWrap{
			padding: 30rpx;
			.goodsItem{
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #efefef;
				.pic{
					flex: 3;
					image{
						width: 100%;
					}
				}
				.info{
					flex: 5;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding-left: 30rpx;
					.goodsName{
						font-size: 36rpx;
						font-weight: bold;
					}
					.goodsNum{
						font-size: 32rpx;
						color: gray;
					}
					.goodsPrice{
						text{
							color: skyblue;
						}
					}
				}
			}
		}
		.bottomControl{
			width: 100%;
			height: 100rpx;
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 1rpx solid #efefef;
			.total{
				flex: 2;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				text{
					font-size: 48rpx;
					color: red;
				}
			}
			.buyBtn{
				flex: 1;
				background-color: skyblue;
				border-radius: 50rpx;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
